<template>
  <div class="tactics-container">
    <div class="title">控制策略</div>
    <div class="line"></div>
    <el-table :data="tableData" style="width: 100%; margin: 20px 0 0 45px;">
      <el-table-column prop="priorityLevel" label="优先级" width="120"></el-table-column>
      <el-table-column prop="visitSource" label="访问源" width="120"></el-table-column>
      <el-table-column prop="purpose" label="目的" width="120"></el-table-column>
      <el-table-column prop="protocol" label="协议" width="120"></el-table-column>
      <el-table-column prop="application" label="应用" width="120"></el-table-column>
      <el-table-column prop="port" label="端口" width="120"></el-table-column>
      <el-table-column prop="action" label="操作" width="120"></el-table-column>
      <el-table-column prop="strategyValidityPeriod" label="策略有效期" width="120"></el-table-column>
      <el-table-column prop="enabledStatus" label="启用状态" width="120"></el-table-column>
      <el-table-column prop="hitCount" label="命中次数" width="180"></el-table-column>
      <el-table-column prop="occupiedSpecification" label="占用规格" width="120"></el-table-column>
      <el-table-column prop="description" label="描述" width="240"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button size="small" type="text" style="color: blue;">操作</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          priorityLevel: '高',
          visitSource: '内部',
          purpose: '数据同步',
          protocol: 'TCP',
          application: '数据库',
          port: '3306',
          action: '允许',
          strategyValidityPeriod: '永久',
          enabledStatus: '已启用',
          hitCount: '100次/昨天',
          occupiedSpecification: '1',
          description: '策略ID: 001 / 创建时间: 2023-01-01'
        },
        // 添加更多数据项
      ]
    };
  }
};
</script>

<style scoped>
.title {
  font-weight: bold;
  font-family: SimSun, '宋体', sans-serif;
  font-size: 30px;
  margin-top: 30px;
  margin-left: 45px;
}

.line {
  margin-top: 20px;
  margin-left: 45px;
  border-top: 1px solid rgb(203, 190, 190);
  width: 96%;
}

.tactics-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.el-table {
  margin-left: 0;
}
</style>